<template>
	<view class="container">

		<view v-if="active == 0">
			<view class="horizonal-scroll">
				<view v-for="item in itemLabels">
					<view class="column label-container">
						<view class="label-content">{{item}}</view>
					</view>
				</view>
			</view>

			<view class="horizonal">
				<view v-for="item in itemIcons">
					<view class="column item-container">
						<van-image round width="50" height="50" src="https://img.yzcdn.cn/vant/cat.jpeg"></van-image>
						<view class="item-content">{{item.name}}</view>
					</view>
				</view>
			</view>

		</view>

		<view v-if="active == 1">
			2
		</view>

		<view v-if="active == 2">
			3
		</view>

		<view v-if="active == 3">
			4
		</view>

		<view>
			<van-tabbar v-model="active" @change="onChange">
				<van-tabbar-item icon="home-o">首页</van-tabbar-item>
				<van-tabbar-item icon="search">抱抱团</van-tabbar-item>
				<van-tabbar-item icon="friends-o">订单</van-tabbar-item>
				<van-tabbar-item icon="setting-o">我的</van-tabbar-item>
			</van-tabbar>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				itemLabels: [
					"coco",
					"正新鸡排",
					"叫了个鸡",
					"螺狮粉",
					"超级机车",
					"茶颜悦色",
					"茶百道"
				],
				itemIcons: [{
						name: "美食外卖",
						url: "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00479-2205.jpg"
					},
					{
						name: "商超便利",
						url: "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00479-2205.jpg"
					},
					{
						name: "买菜",
						url: "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00479-2205.jpg"
					},
					{
						name: "水果",
						url: "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00479-2205.jpg"
					},
					{
						name: "下午茶",
						url: "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00479-2205.jpg"
					}
				]
			}
		},
		methods: {

			onChange(event) {
				console.log(event.detail)
				this.active = event.detail
			}
		}

	}
</script>

<style>
	.container {
		font-size: 14px;
		line-height: 24px;
	}

	.horizonal {
		display: flex;
		flex-direction: row;
	}

	.horizonal-scroll {
		display: flex;
		overflow-y: hidden;
		overflow-x: scroll;
	}

	.column {
		display: flex;
		flex-direction: column;
	}

	.label-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #007AFF;
		margin: .20rem;
	}

	.label-content {
		width: auto;
		font-size: .80rem;
		color: #979696;
	}

	.item-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: .30rem;
	}

	.item-content {
		font-size: .80rem;
		color: #979696;
	}
</style>
